Vue Js Display Time Based Message:  Vue.js is a popular  JavaScript framework that allows developers to build  user interfaces in a modular and reactive way. To display a time-based message using  Vue.js, the developer can leverage the framework’s built-in capabilities to track the current time and update the message based on that.

One way to achieve this is by using a computed property that calculates the current time and compares it to a set of predefined time intervals to determine which message to display. For example, the computed property could check if the current time is between 6 AM and 12 PM to display a “Good morning” message, or between 12 PM and 6 PM to display a “Good afternoon” message.

Once the computed property is set up, the message can be displayed in the template using  Vue‘s data binding syntax. The message will automatically update based on the current time, without the need for the developer to manually update the  UI.

How can I use Vue.js to display different messages based on the time of day?

This is a  Vue.js script that displays a greeting message based on the current time of day. The script sets up a  Vue instance with a data property currentTime that holds the current date and time. It also defines a computed property message that returns a greeting message based on the current time.

The updateTime method is called every second to update the currentTime property with the current time, and the setInterval function is used to call updateTime method repeatedly. The destroyed hook is used to clear the interval when the  Vue instance is destroyed.

The Vue instance is attached to an HTML element with the ID app, which is where the greeting message will be displayed.

Vue Js Display Time Based Message Example

<div id="app">
    <p>{{ message }}</p>
</div>
<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    currentTime: new Date()
                }
            },
            computed: {
                message() {
                    const currentHour = this.currentTime.getHours()

                    if (currentHour >= 6 && currentHour < 12) {
                        return "Good morning!"
                    } else if (currentHour >= 12 && currentHour < 18) {
                        return "Good afternoon!"
                    } else if (currentHour >= 18 && currentHour < 22) {
                        return "Good evening!"
                    } else {
                        return "Good night!"
                    }
                }
            },
            methods: {
                updateTime() {
                    this.currentTime = new Date()
                }
            },
            created() {
                setInterval(this.updateTime, 1000)
            },
            destroyed() {
                clearInterval(this.updateTime)
            }

        });
</script>

Output of above example